<div id="pageBar" class="page-bar"></div>
<input type="text" id="page" value="1" class="display-none" />
<input type="text" id="allpages" class="display-none" />
<input type="text" id="rowCount" class="display-none" />

<script type="text/javascript">
	function loadPageBar(page, allPages, rowCount) {
	    page = parseInt(page);
	    allPages = parseInt(allPages);
	    rowCount = parseInt(rowCount);

	    var html = '';
	    html += '<button type="button" class="layui-btn layui-btn-sm ' + (page == 1 ? 'layui-btn-disabled' : 'layui-btn-primary') + '" onclick="queryPage(' + (page - 1) + ')">上一页</button>';
	    if (page - 5 > 1 + 3) {
	        html += '<button type="button" class="layui-btn layui-btn-sm ' + (page == 1 ? 'layui-btn-normal' : 'layui-btn-primary') + '" onclick="queryPage(1)">1</button>';
	        html += '<span class="page-ellipsis">......</span>';
	        for (var i = page - 5; i <= page; i++) {
	            html += '<button type="button" class="layui-btn layui-btn-sm ' + (page == i ? 'layui-btn-normal' : 'layui-btn-primary') + '" onclick="queryPage(' + i + ')">' + i + '</button>';
	        }
	    }
	    else {
	        for (var i = 1; i <= page; i++) {
	            html += '<button type="button" class="layui-btn layui-btn-sm ' + (page == i ? 'layui-btn-normal' : 'layui-btn-primary') + '" onclick="queryPage(' + i + ')">' + i + '</button>';
	        }
	    }

	    if (page + 5 < allPages - 3) {
	        for (var i = page + 1; i <= page + 5; i++) {
	            html += '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="queryPage(' + i + ')">' + i + '</button>';
	        }
	        html += '<span class="page-ellipsis">......</span>';
	        html += '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="queryPage(' + allPages + ')">' + allPages + '</button>';
	    }
	    else {
	        for (var i = page + 1; i <= allPages; i++) {
	            html += '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="queryPage(' + i + ')">' + i + '</button>';
	        }
	    }
	    html += '<button type="button" class="layui-btn layui-btn-sm ' + (page == allPages ? 'layui-btn-disabled' : 'layui-btn-primary') + '" onclick="queryPage(' + (page + 1) + ')">下一页</button>';

	    setHtml('pageBar', html);
	    setValue('allpages', allPages);
	    setValue('rowCount', rowCount);
	}

	function resetPageBar(flag) {
		setHtml('pageBar', '');
	    if (flag != 'page') {
	        setValue('page', '1');
	    }
	}

	function queryPage(page) {
	    if (getValue('page') == page || 
	    	page <= 0 || 
	    	page > parseInt(getValue('allpages')))
	        return;

	    setValue('page', page);
	    queryKey('page');
	    scrollToTop();
	}

	function scrollToTop() {
	    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
	    if (currentScroll > 1) {
	        window.requestAnimationFrame(scrollToTop);
	        window.scrollTo(0, currentScroll - (currentScroll / 5));
	    }
	}
</script>

<style type="text/css">
	.page-bar
	{
		height: 30px;
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 30px;
		text-align: center;
	}

	.page-ellipsis
	{
		height: 30px;
		line-height: 30px;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
	}
</style>